<template>
  <view>
    <view>
      <tm-sheet :margin="[0]" :padding="[0]" _class="flex flex-row flex-between">
        <!-- 进行显示当前选择的城市 -->
        <tm-sheet
          :margin="[5]"
          :padding="[20, 10]"
          _class="flex flex-row flex-row-center-between"
          @click="showdate = true"
        >
          <tm-text class="mr-10" :label="currentCity"></tm-text>
          <tm-icon :fontSize="20" name="tmicon-angle-down"></tm-icon>
        </tm-sheet>
        <!-- 搜索框 -->
        <tm-sheet :margin="[0]" :padding="[0]" class="flex-7">
          <tm-input
            :searchWidth="120"
            @search="searchLocation"
            searchLabel="搜索"
            searchBgColor="white"
            searchFontColor="black"
            v-model="keyword"
          ></tm-input>
        </tm-sheet>
      </tm-sheet>
      <!-- 下拉框 -->
      <tm-picker
        :defaultValue="[currentCityIndex]"
        v-model:show="showdate"
        :columns="citydate"
        map-key="regionName"
        v-model="pickydata"
        @confirm="confirmPicker"
      ></tm-picker>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import tmSheet from '@/tmui/components/tm-sheet/tm-sheet.vue'
import tmText from '@/tmui/components/tm-text/tm-text.vue'
import tmIcon from '@/tmui/components/tm-icon/tm-icon.vue'
import tmPicker from '@/tmui/components/tm-picker/tm-picker.vue'
import tmInput from '@/tmui/components/tm-input/tm-input.vue'
import { pickupStore } from '@/store'
import { storeToRefs } from 'pinia'
import { onLoad } from '@dcloudio/uni-app'
import { BAIDU_MAP_AK } from "@/utils/const";
import type { Location } from '@/types'

// 需要修改bmap-wx.js文件，将commonjs修改成esModule
// @ts-ignore

import bmap from "@/utils/bmap-wx.js";

const BMap = new bmap({
  ak: BAIDU_MAP_AK,
});

// 进行获取
let { currentCity, currentCityIndex, citydate, currentShop } = storeToRefs(pickupStore())
const { getCity, changeCity } = pickupStore()

onLoad(() => {
  getCity()
})

// 选择器数据的定义
interface PickData {
  [key: string]: any
}
const pickydata = ref<PickData[]>([])


// 经纬度对象
const location = reactive<Location>({
  latitude: 0, // 维度值
  longitude: 0, // 经度值
});

// 控制下拉框的显示与隐藏
const showdate = ref<boolean>(false)

// 获取选择的数据
function confirmPicker(a: Array<number>) {
  // console.log('a====', a)
  let index = a[0] * 1
  currentCity.value = citydate.value[index].regionName
  currentCityIndex.value = index
  searchLocation(citydate.value[index].regionName)
}

// 定义 props，设置默认值  获取搜素框中的内容
const props = withDefaults(defineProps<{ searchKeyword: string }>(), {
  searchKeyword: "",
});

// 创建关键字的 ref  ，根据搜索的关键字创建响应式的数据
const keyword = ref<string>(props.searchKeyword);

// 监听props的变化，当props发生变化时，更新keyword的值
watch(props, (newVal) => {
  keyword.value = newVal.searchKeyword;
});

// 定义emit事件
const emit = defineEmits(["getSearchLeader"]);

// 进行请求的地图的获取
const searchLocation = (address: string) => {
  console.log('当前地址address=====', address);
  if (address && address.length > 0) {
    BMap.geocoding({
      address,
      success: (data: any) => {
        console.log('获取地图接口返回的数据=====', data)

        // 因为百度地图返回的数据中，经纬度的key是lat和lng，而接口中的key是lat和lon，所以需要进行转换
        // 直观模式：
        // const loc: Location = {
        // 	lat: data.result.location.lat,
        // 	lon: data.result.location.lng,
        // }
        // 解构模式：
        const { lat:latitude, lng: longitude } = data.result.location;
        const loc = { latitude, longitude };
        Object.assign(location, loc);
        emit("getSearchLeader", location); // 子组件向父组件传递数据，传递的是location对象
      },
      fail: (e: any) => {
        console.log('地图接口返回的错误信息=====', e)
      },
    });
  }else{
    console.log('地址为空');
  }
};
</script>

<style lang="scss"></style>
